﻿
@{
    ViewBag.Title = "Login-AISUNMES";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}
@model List<string>

@section Contents{
    <link rel="stylesheet" href="/res/layuiadmin/style/login.css" media="all">
}

<div id="page"></div>


<template id="tplPage">
    <div class="layadmin-user-login layadmin-user-display-show">
        <div class="layadmin-user-login-main">
            <div class="layadmin-user-login-box layadmin-user-login-header">
                <h2>{{lang.Login.Title}}</h2>
                <p>{{lang.Login.SubTitle}}</p>
            </div>
            <div class="layadmin-user-login-box layadmin-user-login-body layui-form" lay-filter="loginForm">
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
                    <input type="text" lay-verify="required" v-model="userName" :placeholder="lang.Login.AccountPlaceholder" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                    <input type="password" lay-verify="required" v-model="password" :placeholder="lang.Login.PasswordPlaceholder" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-website" for="LAY-user-login-password" style="z-index:10;"></label>
                    <select id="selLang" lay-filter="selLang">
                        @foreach (var lang in Model)
                        {
                            <option value="@lang">@lang</option>
                        }
                    </select>
                </div>
                <div class="layui-form-item" style="margin-bottom: 20px;">
                    <a href="javascript:;" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;" @@click="forgetPassword">{{lang.Login.ForgetPasswordButton}}</a>
                </div>
                <div class="layui-form-item">
                    <button id="btnLogin" class="layui-btn layui-btn-fluid" lay-submit lay-filter="loginSubmit">{{lang.Login.Login}}</button>
                </div>
            </div>
        </div>
    </div>
</template>

@section Scripts{
    <script>
        var vm = null,
            lang = localStorage.getItem("lang"),
            returnUrl = "@Html.Raw(ViewBag.ReturnUrl)";
        var langName = !lang ? "简体中文" : JSON.parse(lang).name;
        getLang(langName);

        var langCheck = setInterval(function () {
            lang = localStorage.getItem("lang");
            if (lang) {
                lang = JSON.parse(lang);
                clearInterval(langCheck);
                if (!vm) {
                    vm = new Vue({
                        el: "#page",
                        template: "#tplPage",
                        data: {
                            lang: lang.package,
                            userName: "",
                            password: ""
                        }
                    });
                }

                setTimeout(function () {
                    $("#selLang option[value=" + langName + "]").attr("selected", "true");
                    initLayui();
                }, 50);
            }
        }, 100);

        function initLayui() {
            layui.use(['index', 'laydate', 'form'], function () {
                var layer = layui.layer,
                    form = layui.form;
                form.render();

                form.on('select(selLang)', function (data) {
                    langName = data.value;
                    getLang(langName);
                });
                form.on('submit(loginSubmit)', function (data) {
                    var loadId = layer.load();
                    $.ajax({
                        url: "/Auth/Login",
                        type: "POST",
                        data: {
                            lang: langName,
                            userName: vm.$data.userName.trim(),
                            password: vm.$data.password.trim()
                        },
                        dataType: "JSON",
                        error: function () {
                            layer.msg('网络出错', { icon: 5 });
                        },
                        complete: function () {
                            layer.close(loadId);
                        },
                        success: function (result) {
                            if (result.ErrCode !== 200) {
                                layer.msg(result.ErrMsg, { icon: 5 });
                                return;
                            }
                            location.href = returnUrl;
                        }
                    });
                });

                $(document).on("keyup", ".layui-input", function (e) {
                    if (e.keyCode == 13) {
                        $("#btnLogin").click();
                    }
                });
            });
        }

        function getLang(lang) {
            console.log("选择语言包：" + lang);
            $.ajax({
                url: "/Auth/GetLang",
                type: "POST",
                data: {
                    lang: lang
                },
                dataType: "json",
                success: function (res) {
                    if (res.ErrCode != 200) {
                        layer.msg(res.ErrMsg, { icon: 1 });
                        return;
                    }
                    localStorage.setItem("lang", res.Data);
                    if (vm) {
                        vm.$data.lang = JSON.parse(res.Data).package;
                    }
                }
            });
        }
        function forgetPassword() {
            layer.msg(vm.$data.lang.Login.ForgetPasswordMsg, { icon: 1 });
        }
    </script>
}
